<template>
<!-- 商品评论 -->
        <view class="goods-comment">
         
            <view class="comment-list">
                <view class="comment-item">
                    <view class="comment-title">
                        <view class="user-name">
                            <view class="user-pic"><image class="wh100" :src="comments.is_anonymous ? defaultAvatar : comments.head_pic ? comments.head_pic : defaultAvatar"></image></view>
                            {{comments.is_anonymous ? '匿名用户' : comments.username}}
                        </view>
                        <view>{{comments.addTimeFormat}}</view>
                    </view>
                    <view class="comment-cont">
                        <view class="stars">
                            <view class="stars-checked">
                                <image v-for="(item, index) in comments.goods_rank" :key="index" class="star" src="/static/images/star-red.png"></image>
                            </view>
                            <view class="stars-unchecked">
                                <image v-for="(item, index) in 5-item.goods_rank" :key="index" class="star" src="/static/images/star-gray.png"></image>
                            </view>
                        </view>
                        <view class="comment-mes">{{comments.content}}</view>
                        <view class="img-ul">
                             <view v-for="(item, index) in comments.img" :key="index" class="img-li">
                                <image class="wh100" :src="url + item" @tap="previewCommentImgs" :data-cidx="cIdx" :data-id="index"></image>
                             </view>
                        </view>                                              
                    </view>                    
                </view>

<block v-if="reply.length > 0">
                <view class="reply-count" v-if="reply_count > 0">回复<text style="color: #c1c1c1;">({{reply_count}})</text></view>
                   <view v-for="(item, index) in reply" :key="index" class="comment-item">                  
                    <view class="comment-title">
                        <view class="user-name">
                            <view class="user-pic"><image class="wh100" :src="defaultAvatar"></image></view>
                            {{item.user_name}}
                        </view>
                        <view>{{item.reply_time}}</view>
                    </view>
                    <view class="comment-cont">
                    <view class="comment-mes reply_content">回复：{{item.to_name}}</view>
                        <view class="comment-mes reply_content">{{item.content}}</view>                    
                    </view>                    
                </view>
          </block>
            </view>
        </view>
</template>

<script>
var util = require("../../../utils/util.js");
var common = require("../../../utils/common.js");
var app = getApp();
var request = app.globalData.request;
var setting = app.globalData.setting;

export default {
  data() {
    return {
      url: setting.url,
      resourceUrl: setting.resourceUrl,
      defaultAvatar: setting.resourceUrl + "/static/static/images/user68.jpg",
      comments: "",
      reply_count: "",
      reply: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    this.requestComments(options.comment_id);
  },
  onShow: function () {},

  /**
   * 转发按钮
   */
  onShareAppMessage: function (res) {
    return setting.share;
  },
  methods: {
    /** 请求评论数据 */
    requestComments: function (comment_id) {
      var that = this;
      var requestUrl = that.url + '/api/user/comment_info?comment_id=' + comment_id;
      request.get(requestUrl, {
        success: function (res) {
          var comments = res.data.result.comment_info;
          var reply_count = res.data.result.reply.count;
          var reply = res.data.result.reply.list;
          comments.addTimeFormat = util.formatTime(comments.add_time);
          comments.head_pic = common.getFullUrl(comments.head_pic);

          if (reply.length > 0) {
            for (var i = 0; i < reply.length; i++) {
              reply[i].reply_time = util.formatTime(reply[i].reply_time);
            }
          }

          that.setData({
            comments: comments,
            reply_count: reply_count,
            reply: reply
          });
        }
      });
    }
  }
};
</script>
<style>
/* goodsInfo.wxss */
 
.container{
    margin-bottom: 100rpx;
}
image{
    vertical-align: top;
}
.type-navbar{
    display: flex;
    justify-content: center;
    width: 100%;
    height:80rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
}
.type-box{
    width:25%;
    box-sizing: border-box;
    font-size: 28rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
    text-align: center;
    display: inline-block;
    overflow: hidden;
}
.type-navbar-item{
    border-bottom: 4rpx solid #fff;
}
.type-item-on{
    border-bottom: 4rpx solid #333;
    font-weight: bold;
}
.swiper_box {
    width: 100%;
    height: 750rpx;
}
.goods-title{
    display: flex;
    justify-content: space-between;
    height: 108rpx;
}
.goods-name{
    width: 560rpx;
    max-height: 88rpx;
    margin: 10rpx 0;
    line-height: 44rpx;
    font-size: 30rpx;
    color: #333;
    padding-top: 10rpx;
}
.goods-collect{
    width: 112rpx;
    padding-top: 20rpx;
}
.collect-img{
    width: 50rpx;
    height: 44rpx;
    margin: 0 auto;
    overflow: hidden;
}
.collect-des{
    text-align: center;
    font-size: 24rpx;
    color: #333;
}
.goods-price{
    font-size: 30rpx;
    padding:20rpx 30rpx; 
    line-height: 40rpx;
    color: #999;
    border-bottom: 1px solid #f3f3f3;
}
.prom-info{
    margin: 10rpx 0;
    color: #ff6a00;
}
.prom-info>.prom-type{
    color: white;
    background-color: #ff6a00;
    margin-right: 14rpx;
    padding: 2rpx 8rpx;
    border-radius: 4rpx;
}
.market-price{
    display: flex;
}
.market-price>view{
    text-decoration: line-through;
}
.goods-num{
    display: flex;
    justify-content: space-between;
}
.logistics-item{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 90rpx;
    border-bottom: 1px solid #f3f3f3;
    font-size: 24rpx;
    color: #666;
}
.item-title{
    width: 180rpx;
}
.item-mes{
    color: #333;
    width: 420rpx;
    height: 90rpx;
    line-height: 90rpx;
    overflow:hidden;
    white-space:nowrap;
    text-overflow:ellipsis;
}
.item-img{
    width: 32rpx;
    height: 32rpx;
}
.prom-item {
    color: #ff6a00;
    border: 1px solid #ff6a00;
    border-radius: 18rpx;
    line-height: 40rpx;
    height: 40rpx;
    padding: 2rpx 8rpx;
}
.guarantee{
    justify-content:space-around;
}
.ico-item{
    width: 32rpx;
    height: 32rpx;
    margin-right: 10rpx;
}
.guarantee>view{
    display: flex;
    align-items: center;
    height: 32rpx;
    color: #666;
}
.user-comment{
    margin:10rpx 0;
    font-size: 28rpx;
}
.good-comment,.comment-num{
    display: flex;
}
.recommend{
    background-color: #fff;
    border-bottom: 1px solid #f3f3f3;
    padding-bottom: 20rpx;
}
.recommend-title{
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    padding: 0 30rpx;
}
.recommend-ul{
    display: flex;
    justify-content: flex-start;
}
.recommend-ul .li{
    width: 25%;
    box-sizing: border-box;
    text-align: center;
    font-size: 28rpx;
    color: #333;
}
.li-img{
    width: 120rpx;
    height: 120rpx;
    margin: 0 auto;
}
.li-title{
    height: 58rpx;
    line-height: 30rpx;
    margin: 10rpx 0;
}
.comment-item{
    background-color: #fff;
    font-size: 28rpx;
}
.comment-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 102rpx;
    margin:0 30rpx;
    color: #333;
}
.user-name{
    display: flex;
    align-items: center;
}
.user-pic{
    width: 54rpx;
    height: 54rpx;
    margin-right: 10rpx;
    border-radius:50%;
    overflow: hidden;
}
.stars{
    float: left;
    display: flex;
    height: 42rpx;
    line-height: 42rpx;
    width: 200rpx;
}
.star{
    width: 30rpx;
    height: 28rpx;   
}
.comment-cont{
    padding: 0 30rpx 30rpx;
    border-bottom: 20px solid #f3f3f3;
}
.comment-mes{
    line-height: 42rpx;
    display: flex;
    width: 100%;
}
.img-ul{
    display: flex;
    flex-wrap: wrap;
}
.img-li{
    width: 120rpx;
    height: 120rpx;
    margin: 8rpx;
}
.comment-btn{
    height: 60rpx;
    padding: 20rpx 30rpx;
}
.comment-btn .btn{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    width: 45%;
    border: 1px solid #f3f3f3;
}
.comment-btn .btn-img{
    width: 30rpx;
    height: 28rpx;
    margin: 0 10rpx;
}
.reply-ul{
    margin-top: 20rpx;
}
.reply-li{
    color: #aaa;
}
.join-cart{
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    text-align: center;
}
.join-cart>view{
    width: 25%;
}
.cart-ico{
    font-size: 24rpx;
    color: #333;
}
.shopping-cart{
    position: relative;
}
.cs-img{
    width: 45rpx;
    height: 40rpx;
    margin-top: 15rpx;
}

.cs-button{
    font-size: 26rpx;
    border: 1rpx solid #fff;
    height:112rpx;
    line-height: 45rpx; 
}
.cs-button::after{ border: none; } 
.sc-img{
    width: 42rpx;
    height: 40rpx;
    margin-top: 15rpx;
}
.cs-img-kf{
    margin-top: 7rpx
}

.sc-img{
    width: 42rpx;
    height: 40rpx;
    margin-top: 15rpx;
}
.cart-num{
    position: absolute;
    left: 50%;
    top: 0;
    width: 40rpx;
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    border-radius: 50%;
    color: #fff;
    background-color: rgba(217,81,99,0.9);
}
.cart-btn{
    font-size: 28rpx;
    color: #fff;
    line-height: 100rpx;
}
.join-btn{
    background-color: #ffb03f;
}
view.cart-btn-lg{
    width: 50%;
}
.buy-btn{
    background-color: #ff6a00;
}
.toTop{
    position: fixed;
    z-index: 3;
    right: 20rpx;
    bottom: 160rpx;
    width: 68rpx;
    height: 68rpx;
    border:1px solid #f3f3f3;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
}
.comment-more{
    height: 56rpx;
    line-height: 56rpx;
    font-size: 26rpx;
    color: #999;
    text-align: center;
    background-color: #eee;
}
.goods-more{
    background-color: #fff;
}
/* 详情 */
.goods-norms{
    background-color: #fff;
}
.type-navbar2{
    display: flex;
    height: 72rpx;
    border-top:1px solid #f3f3f3;
    border-bottom:1px solid #f3f3f3;
}
.type-box2{
    width:50%;
    font-size: 26rpx;
    line-height: 72rpx;
    text-align: center;
    overflow: hidden;
}
.type-item2-on{
    color: #ff6a00;
}
.parameter{
    padding: 40rpx 0;
}
.table{
    width: 698rpx;
    margin: 0 auto;
    border:1px solid #f3f3f3;
    border-bottom: none;
}
.tb{
    width: 100%;
    min-height: 69rpx;
    line-height: 69rpx;
    border-bottom:1px solid #f3f3f3;
    font-size: 28rpx;
    text-align:center; 
    color: #333;
}
.th-thitle{
    font-weight: bold;
    background-color:#f5fafe; 
}
.td-cont{
    display: flex;
}
.td-title{
    width: 259rpx;
    background-color:#f5fafe; 
    border-right:1px solid #f3f3f3;
}   
.td-text{
    width: 439rpx;
}
/* 评论 */
.goods-comment{
    background-color: #fff;
}
.type-navbar3{
    display: flex;
    height: 88rpx;
    border-top:1px solid #f3f3f3;
    border-bottom:1px solid #f3f3f3;
}
.type-box3{
    width:20%;
    font-size: 28rpx;
    line-height: 44rpx;
    text-align: center;
    overflow: hidden;
}
.type-item3-on{
    color: #ff6a00;
}
/* 规格弹框 */
.spec-model{
    position: fixed;
    bottom: 0;
    z-index: 20;
    background: white;
    width: 100%;
    padding: 0 30rpx;
    font-size: 32rpx;
    box-sizing: border-box;
    overflow-x: hidden;
}
.spec-goods{
    padding: 15rpx 0 30rpx;
    float: left;
    width: 100%;
    border-bottom: 1px solid #f3f3f3;
}
.spec-img{
    float: left;
    height: 150rpx;
    width: 150rpx;
    margin-top:16rpx;
}
.spec-goods-info{
    float: left;
    padding: 0 25rpx; 
    width: 490rpx;
}
.spec-goods-name{
    font-size: 30rpx;
    line-height: 35rpx;
    height: 70rpx;
    margin: 15rpx 20rpx 25rpx 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.spec-goods-price{
    color: #ff6a00;
    font-size: 30rpx;
    font-weight: bold;
}
.spec-goods-stock{
    margin-top: 10rpx;
    font-size: 26rpx;
    color: #999999;
}
.spec-name{
    clear: both;
    padding: 20rpx 0;
    font-size: 30rpx;
}
.count{
    float: left;
    width: 184rpx;
    height: 50rpx;
    border: 1rpx solid #f3f3f3;
    font-size: 28rpx;
}
.count>view,.count>input{
    float: left;
    width: 60rpx;
    height: 50rpx;
    line-height: 50rpx;
    text-align: center;
}
.sub{
    border-right: 1px solid #f3f3f3;
}
.add{
    border-left: 1px solid #f3f3f3;
}
.spec-btn{
    color: black;
    background-color: white;
    padding: 10rpx 10rpx;
    font-size: 26rpx;
    line-height: 28rpx;
    float: left;
    border: 1rpx solid #f3f3f3;
    margin: 4rpx 10rpx 4rpx 0;
    border-radius: 4rpx;
}
.spec-btn-click{
    color: white;
    background-color: #ff6a00;
    border: 1rpx solid #ff6a00;
}
.spec-cart-btns{
    background-color: #f8f8f8;
    margin:40rpx -30rpx 0;
    padding: 20rpx 34rpx;
    float: left;
    width: 100%;
    line-height: 80rpx;
}
.spec-cart-btn{
    float: left;
    width: 324rpx;
    font-size: 30rpx;
    text-align: center;
    color: white;
    border-radius: 4rpx;
}
.spec-add-cart{
    background-color: #ffb03f;
}
.spec-buy{
    background-color: #ff6a00;
    margin-left: 34rpx;
}
.spec-cart-disable{
    background: #bbbbbb;
}
.spec-cart-btn-lg{
    width: 614rpx;
}
/* 优惠信息弹框 */
.prom-model{
    position: fixed;
    bottom: 0;
    z-index: 20;
    background: white;
    width: 100%;
    padding: 0 30rpx 30rpx;
    font-size: 32rpx;
    box-sizing: border-box;
    overflow-x: hidden;
}
.prom-model .prom-title{
    text-align: center;
    margin: 30rpx 0;
}
.prom-model .logistics-item{
    border: 0;
}
.prom-model .item-mes{
    width: 500rpx;
}
.integral-btn{
    width: 100%;
    padding: 0rpx;
    margin: 0rpx;
}
.reply-count{
    margin-left:20px;
    padding:10px;
}

.reply_content{
    margin-left:60rpx;
}
</style>